<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>团购APP发现</title>
	<meta name="viewport" content="width=750,maximum-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="css/public.css">
	<script type="text/javascript" src="./js/touch-0.2.14.js"></script>
	<link rel="stylesheet" href="css/discover.css">
	<script type="text/javascript">
		(function (doc, win) {
		    var docEl = doc.documentElement,
		        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		        recalc = function () {
		            var clientWidth = docEl.clientWidth;
		            if (!clientWidth) return;
		            if (clientWidth>=720) {
		            	 // docEl.style.fontSize ='100px';
		            }else{
		            	docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
		            } 
		        };
		    // Abort if browser does not support addEventListener
		    if (!doc.addEventListener) return;
		    win.addEventListener(resizeEvt, recalc, false);
		    doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);
	</script>
</head>
<body>
	<div class="content">
		<header class="header">
			<button>back</button>
			<p class="text">发现</p>
			<div class="header_select">
				<p>广州市
					<a href="#" class="target">
						<img src="./images/arrows_bottom.png" alt="">
					</a>
				</p>
				<div id="area" style="display:none;">
					<ul>
						<li>惠州市</li>
						<li>深圳市</li>
						<li>东莞市</li>
						<li>梅州市</li>
					</ul>
				</div>
			</div>
			<div class="clear"></div>
		</header>
		<div class="header_serach">
			<input class="searchs" type="search" name="search" placeholder="请输入商品名称" form="user_form"/>
			<input class="btn" type="button" name="btn"  value="" />
		</div>
		<div class="clear"></div>
		<div class="search">
			<p>大家都在搜</p>
			<ul id="list">
				<li class="Oli"><a href="">寿司</a></li>
				<li class="Oli"><a href="">羽毛球</a></li>
				<li class="Oli"><a href="">火锅</a></li>
				<li class="Oli"><a href="">游泳馆</a></li>
				<li class="Oli"><a href="">电影</a></li>
				<li class="Oli"><a href="">周黑鸭</a></li>
				<li class="Oli"><a href="">KTV</a></li>
				<li class="Oli"><a href="">肯德基</a></li>
			</ul>
			<div class="clear"></div>
		</div>
		<article class="coupon">
			<div class="delicious">
				<h1>
					<img src="./images/discover_icon_1.png" alt="" class="star">
					<span>热门搜索</span>
						<p class="more" style="float: right;">
							<a href="./case.html">
								更多
						<img src="./images/index_icon_1.png" alt="" class="icon_1">
							</a>
						</p>
				</h1>
			</div>
			<div class="clear"></div>
			<ul class="search_img">
				<li><a href="./case.html"><img src="./images/discover_search_1.png" alt=""></a></li>
				<li><a href="./case.html"><img src="./images/discover_search_2.png" alt=""></a></li>
				<li><a href="./case.html"><img src="./images/discover_search_3.png" alt=""></a></li>
				<li><a href="./case.html"><img src="./images/discover_search_4.png" alt=""></a></li>
			</ul>
			<div class="clear"></div>
		</article>
		<article class="coupon">
		
			<div class="delicious">
				<h1>
					<img src="./images/discover_icon_2.png" alt="" class="star">
					<span>推荐搜索 </span>
						<p class="more" style="float: right;">
							<a href="./case.html">
								更多
						<img src="./images/index_icon_1.png" alt="" class="icon_1">
							</a>
						</p>
				</h1>
			</div>
			<div class="clear"></div>
			<ul class="cate">
				<li><a href=""><img src="./images/discover_hot_1.png" alt=""></a></li>
				<li><a href=""><img src="./images/discover_hot_2.png" alt=""></a></li>
				<li><a href=""><img src="./images/discover_hot_3.png" alt=""></a></li>
			</ul>
			<div class="clear"></div>
		</article>
		<div class="footer"></div>
		<nav>
			<a href="./index.html">
				<img src="./images/index_icon_2.png" alt="">
				首页
			</a>
			<a href="./classify.html">
				<img src="./images/index_icon_3.png" alt="">
				分类
			</a>
			<a href="./discover.html">
				<img src="./images/index_icon_4.png" alt="">
				发现
			</a>
			<a href="./mine.html">
				<img src="./images/index_icon_5.png" alt="">
				我的
			</a>
		</nav>
	</div>
</body>
</html>
<script>
window.onload=function(){
	var area=document.getElementById("area");
	touch.on('.target', 'touchstart', function(ev){
			if(area.style.display=="block"){
				area.style.display="none";
			}else{
				area.style.display="block";
			} 
		});
	var list=document.getElementById("list");
	touch.on('.Oli', 'touchstart', function(ev){
			if(area.style.background=="#dcdcdc"){
				area.style.background="#ff9344";
			}else{
				area.style.background="#ff9344";
			} 
		});
}
</script>